<template>
	<view>
		<!-- 第一段文字 -->
		<view class="top-text">
			开启后，有新的任务通知你
		</view>
		<!-- 第二段文字与开关 -->
		<view class="class-view">
			<view class="content">
				允许给我推送任务通知
			</view>
			<view class="body-view">
				<switch class="switch-view" checked="{{switch1Checked}}" @click="switch1Change" type='switch'/>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				switch1Checked: false,
			}
		},
		methods: {
			switch1Change () {
				this.switch1Checked = !this.switch1Checked;
				console.log(`Switch样式点击后是否选中：`, this.switch1Checked);
			}
		}
	}
</script>

<style>
	body {
		background-color: #f0f0f0; /* 设置默认背景颜色 */
	}

	.top-text {
		background-color: #cccccc; /* 设置灰色背景 */
		padding: 10px;
		text-align: center; /* 文字居中 */
		margin-bottom: 10px;
	}

	.class-view {
		display: flex; /* 使内部元素水平排列 */
		align-items: center; /* 垂直居中 */
		padding: 10px;
		margin-top: 30px;
	}

	.content {
		flex: 1; /* 占用剩余空间 */
	}

	.body-view {
		margin-left: 10px; /* 与文字对齐 */
	}

	.switch-view {
		margin-left: 5px;
	}
</style>